<template>
    <div class="config">
        <Tabs type="card" :animated="false" style="background:#efeff1" v-model="tabName">
            <TabPane label="出入异常配置">
                <h2 class="margin-bottom-20 border-bottom" style="padding-bottom:20px">人员出入异常配置</h2>
                <div class="configuration-add">
                    <span>租客预警规则</span>
                    <i-button type="primary" @click="addRlue">添加</i-button>
                </div>
                <Row class="yd-padding-b-16">
                    <Table stripe border ref="selection" :columns="columns" :data="tagsDate" :loading="isLoadig"></Table>
                    <Page 
                    :total="total"
                    :page-size="size"
                    :current.sync="currentPage"
                    @on-change="loadTenantTags(false)"
                    show-elevator
                    show-total
                    style="text-align:center"></Page>
                </Row>
            </TabPane>
        </Tabs>
        <Modal
            width="650"
            v-model="showModal"
            @on-ok="ok"
            @on-cancel="cancel"
            title="租客预警规则">
            <p class="modal-title">如果</p>
            <div class="modal-content">
                <span>租客标签：</span>
                <Select filterable clearable ref='tenantTagRef' v-model="tenantTagId" style="width:100px">
                    <Option v-for="item in selectTagsDate" :value="item.id" :key="item.id">{{ item.name }}</Option>
                </Select>
                <i-input number v-model="unopenedWarnNum" placeholder="请输入..." style="width: 100px"></i-input>
                <span>天在系统没有门禁开门记录。</span>
            </div>
            <p class="modal-title">则</p>
            <p class="modal-content">创建一条人员出入异常预警消息。</p>
            <p>注意：租客出现预警后，解除预警方式：租客进行了刷脸开门，或管理人员解除预警。</p>
        </Modal>
    </div>
</template>

<script>
import { http, api } from '@/libs/http'
import debounce from 'lodash/debounce'
export default {
  name: 'config_index',
  data () {
    return {
      tabName: 0,
      showModal: false,
      isLoadig: false, // 是否正在发请求
      unopenedWarnNum: '', // 预警天数
      tenantTagId: '', // 租客标签id
      cityList: [
        {
          name: '租客',
          id: 1

        },
        {
          name: '独居老人',
          id: 2
        },
        {
          name: '深圳市',
          id: 3
        }
      ],
      tagsDate: [], // 开启预警标签数据
      selectTagsDate: [], // 未开启预警标签数据
      columns: [ // 表格格式
        {
          title: '标签',
          key: 'name',
          align: 'center'
        },
        {
          title: '预警规则',
          key: 'unopened_warn_num',
          align: 'center',
          width: 500,
          render: (h, params) => {
            let result = params.row.unopened_warn_num + '天在系统没有门禁开门开门记录，则创建一条人员出入异常预警消息。'
            return h('span', result)
          }
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'ghost',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px',
                    marginLeft: '0px'
                  },
                  on: {
                    click: () => {
                      this.tenantTagId = params.row.id
                      this.selectTagsDate = [params.row]
                      this.unopenedWarnNum = params.row.unopened_warn_num
                      this.showModal = true
                    }
                  }
                },
                '编辑'
              ),

              h(
                'Button',
                {
                  props: {
                    type: 'ghost',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.$Modal.confirm({
                        width: '300px',
                        content: '确定删除该预警配置 ? ',
                        onOk: () => {
                          this.delTenantWarn(params.row.id)
                        }
                      })
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      formData: { // 请求数据
        is_unopened_warn: 1,
        offset: 0,
        limit: 10
      },
      total: 0, // 总数据量
      size: 10, // 每页数据量
      currentPage: 1 // 当前页码
    }
  },
  created () {
    this.init()
  },
  methods: {
    init () {
      this.loadTenantTags()
      this.loadNotTenantTags()
    },

    // 获取租客标签预警 --开启预警的标签
    async loadTenantTags () {
      let params = {
        is_unopened_warn: 1,
        offset: this.size * (this.currentPage - 1),
        limit: this.size
      }
      try {
        const data = await http.req(api.tenant_tags_get, null, params)
        this.tagsDate = data.rows
        this.total = data.count
        console.log('获取人员出入异常配置列表-----开启预警的标签', data)
      } catch (err) {
        console.log(err)
      }
    },

    addRlue () {
      this.showModal = true
      if (this.$refs['tenantTagRef']) {
        this.$refs['tenantTagRef'].clearSingleSelect()// 清空绑定位置
      }
      // this.tenantTagId = '';
      // this.selectTagsDate = [];
      this.unopenedWarnNum = ''
      this.loadNotTenantTags()
    },

    // 获取租客标签预警 --未开启预警的标签
    async loadNotTenantTags () {
      let params = {
        is_unopened_warn: 0,
        offset: 0,
        limit: 100
      }
      try {
        const data = await http.req(api.tenant_tags_get, null, params)
        this.selectTagsDate = []
        let dataBox = data.rows
        dataBox.forEach(item => {
          this.selectTagsDate.push(item)
        })
        // this.selectTagsDate = data.rows;
        console.log('获取人员出入异常配置列表-----未开启预警的标签', this.selectTagsDate)
      } catch (err) {
        console.log(err)
      }
    },
    // 点击确定
    ok: debounce(function () {
      console.log(`标签：${this.tenantTagId},天数：${this.unopenedWarnNum}`)
      if (!this.tenantTagId) {
        this.$Message.error('请选择租客标签')
        return
      }
      if (!this.unopenedWarnNum) {
        this.$Message.error('请输入预警天数')
        return
      }
      if (this.unopenedWarnNum <= 0) {
        this.$Message.error('预警天数至少为1天')
        return
      }
      if (this.unopenedWarnNum % 1 !== 0) {
        this.$Message.error('预警天数必须为整数')
        return
      }
      let data = {
        'unopened_warn_num': this.unopenedWarnNum
      }
      // console.log(`unopened_warn_num:${unopened_warn_num}`);
      http.request(this, api.tenant_warn_add, [this.tenantTagId], data, res => {
        if (res) {
          console.log('长时间未关门', res)
          this.init()
          this.$Message.success('预警规则添加成功')
          // this.loadTenantTags();
          // this.loadNotTenantTags();
        }
      })
    }, 300),

    // 点击取消
    cancel () {
      // this.$Message.info('点击了取消');
    },

    // 关闭租客标签预警--（删除）
    delTenantWarn: debounce(function (id) {
      const params = {
        'is_unopened_warn': false
      }
      http.request(this, api.tenant_warn_del, [id], params, res => {
        if (res) {
          this.$Message.success('删除成功')
          console.log('删除成功', res)
          // this.loadTenantTags();
          this.init()
        }
      })
    }, 300)
  }
}
</script>

<style lang="less" scoped>
.configuration-add{
    padding-left:30px;
    margin-bottom:20px;
    span{
        margin-right:20px;
    }
}
.open-warning{
    display: flex;
    margin-left:30px;
    line-height:1.4;
    span:nth-child(1){
        color:red;
        font-size:20px;
    }
    span:nth-child(2){
        margin: 0 20px;
        line-height: 25px;
    }
}
.rules{
    padding-left:30px;
    margin-bottom:20px;
}
.btn{
    padding-left:30px;
}
.modal-title{
    font-size:14px;
    font-weight:500;
    margin-bottom:10px;
}
.modal-content{
    margin-left:20px;
    margin-bottom:10px;
}
</style>
